{% extends 'base/base.html' %}

{% block main %}
    <!-- 轮播、最新 -->
    <div class="index_top_row">
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
            <el-col :span="10">
                <div class="grid-content bg-purple">
                    <template>
                        <el-carousel :interval="4000" indicator-position="outside" height="260px">
                            <el-carousel-item v-for="data in focus"><h3 class="medium">
                                <a href="javascript:;" :data-id="data.uuid" ><img  width="100%" height="260px" :src="data.novel_img"></a>
                            </h3>
                            </el-carousel-item>
                        </el-carousel>
                    </template>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple right">
                    <div class="title">最新发布</div>
                    <ul>
                        <li v-for="data in newest">
                            <el-link type="info" :data-id="data.uuid" :underline="false">[<span v-text="data.categories"></span>]&nbsp;&nbsp;<span
                                    v-text="data.novel_name"></span></el-link>
                        </li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
        </el-row>
    </div>
    <!-- 热门推荐 -->
    <div class="index_recommend_hot">
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content bg-purple">
                    <div class="left">
                        <strong>热门推荐</strong>
                        <el-divider></el-divider>
                        <div class="article">
                            <article v-for="data in hot">
                                <div class="article_left">
                                    <el-link type="info" :underline="false" :data-id="data.uuid"><img :src="data.novel_img"></el-link>
                                </div>
                                <div class="article_right">
                                    <h4>
                                        <el-link type="info" :underline="false" :data-id="data.uuid" v-text="data.novel_name"></el-link>
                                    </h4>
                                    <div class="article_synopsis" v-text="data.novel_description"></div>
                                    <div class="article_msg">
                                        <div style="float: left"><i class="el-icon-user-solid"></i><span v-text="data.novel_author"></span></div>
                                        <div style="float: right;border: 1px solid #e7e7e7;" v-text="data.categories"></div>
                                    </div>
                                </div>
                            </article>

                        </div>
                    </div>
                    <div class="right">
                        <strong>随机强推</strong>
                        <el-divider></el-divider>
                        <ul>
                            <li v-for="data in random">
                                <el-link href="javascript:;" type="info" :underline="false" :data-id="data.uuid">「<span v-text="data.categories"></span>」</el-link>
                                <el-link href="javascript:;" type="info" :underline="false" class="title" :data-id="data.uuid" v-text="data.novel_name"></el-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
        </el-row>
    </div>
    <!-- 分类列表 -->
    <div class="index_nav_novel">
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
            <el-col :span="16">
                <strong>分类推荐</strong>
                <el-divider></el-divider>
                <div class="list_novel">
                    <article class="nav_list_novel" v-for="nav in navNovel">
                        <h2 v-text="nav.column_name"></h2>
                        <div class="top" v-for="novel in nav.novelList.slice(0,1)">
                            <div class="image">
                                <el-link :data-id="novel.uuid" :underline="false" :title="novel.novel_name">
                                    <el-image :src="novel.novel_img" :alt="novel.novel_name"></el-image>
                                </el-link>
                            </div>
                            <dl>
                                <dt>
                                    <el-link :data-id="novel.uuid" :underline="false" v-text="novel.novel_name"></el-link>
                                </dt>
                                <dd v-text="novel.novel_description"></dd>
                            </dl>
                        </div>
                        <ul>
                            <li v-for="novel in nav.novelList.slice(1,6)">
                                <el-link :data-id="novel.uuid" :underline="false" :title="novel.novel_name" v-text="novel.novel_name"></el-link>
                                <span v-text="novel.novel_author"></span>
                            </li>
                        </ul>
                    </article>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
        </el-row>
    </div>
    <!-- 友情链接 -->
    <div class="links">
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content bg-purple">
                    <strong class="el-icon-link">友情链接</strong>
                    <el-divider></el-divider>
                    <div class="links-list">
                        <el-link :href="link.link_url" :underline=" false" icon="el-icon-orange" v-for="link in links" v-text="link.link_name" target="_blank"></el-link>
                    </div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
        </el-row>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        var Main = {
            data() {
                return {
                    title:'',
                    keywords:'',
                    description:'',
                    search: {
                        key: ''
                    },
                    //          loginForm: {},
                    //         regForm: {},
                    //        login: false,
                    //        formLabelWidth: '80px',
                    //       code_img: {
                    //           url: '',
                    //          status: false,
                    //         button: true,
                    //        img_show: false
                    //    },
                    //    login_or_reg: {
                    //       'title': '用户登录',
                    //       status: true
                    //   },
                    navList: [],
                    newest: [],
                    hot: [],
                    random: [],
                    column_display: [],
                    navNovel: [],
                    links: [],
                    focus: []
                };
            },
            methods: {
                loadNav: function () {
                    reslut = ajax(this, 'GET', {'parse': 'all'}, '{% url "web_api:navigation" %}');
                    if (reslut.code === 0) {
                        this.navList = reslut.nav_all;
                        this.column_display = reslut.column_display;
                    }
                },
                handleNavSelect: function (key, keyPath) {
                    handleNavSelect(key, keyPath)
                },
                handSearch: function () {
                    var key = this.search.key;
                    console.log(key)
                },
                /*  handleClose: function (done) {
                      done()
                      this.code_img = {
                          url: '',
                          status: false,
                          button: true,
                          img_show: false
                      } // 重置验证码
                  },
                  onSubmit: function () {
                      console.log(this.loginForm)
                  },
                  get_v_code: function () {
                      // 获取验证码
                      this.code_img.url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
                      this.code_img.img_show = true; // 显示验证码
                      this.code_img.button = false; // 隐藏验证码按钮
                  },
                  reg: function () {
                      this.login_or_reg.status = false;
                      this.login_or_reg.title = "用户注册面板";
                  },
                  login_page: function () {
                      this.login_or_reg.status = true;
                      this.login_or_reg.title = "用户登录面板";
                  },
                  recharge: function () {
                      this.$prompt('请输入邮箱', '提示', {
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                          inputErrorMessage: '邮箱格式不正确'
                      }).then(({
                                   value
                               }) => {
                          this.$message({
                              type: 'success',
                              message: '你的邮箱是: ' + value
                          });
                      }).catch(() => {
                      });
                  }

                 */
            },
            mounted() {
                // 初始化数据--> 调用方法
                this.loadNav(); // 加载导航
                reslut = ajax(this, 'GET', {'type': 'newest', 'limit': 6}, '{% url "web_api:getNovel" %}'); // 最新
                if (reslut.code === 0) {
                    this.newest = reslut.dataList;
                }
                reslut = ajax(this, 'GET', {'type': 'hot', 'limit': 9}, '{% url "web_api:getNovel" %}'); // 热推
                if (reslut.code === 0) {
                    this.hot = reslut.dataList
                }
                reslut = ajax(this, 'GET', {'type': 'random', 'limit': 15}, '{% url "web_api:getNovel" %}'); // 随机推
                if (reslut.code === 0) {
                    this.random = reslut.dataList
                }
                reslut = ajax(this, 'GET', {'limit': 6}, '{% url "web_api:navigationNovel" %}'); // 首页分类
                if (reslut.code === 0) {
                    this.navNovel = reslut.navNovel
                }
                reslut = ajax(this, 'GET', {}, '{% url "web_api:links" %}'); // 首页分类
                if (reslut.code === 0) {
                    this.links = reslut.links
                }
                reslut = ajax(this, 'GET', {'type': 'focus', 'limit': 8}, '{% url "web_api:getNovel" %}'); // 首页分类
                if (reslut.code === 0) {
                    this.focus = reslut.dataList
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app')
    </script>
{% endblock %}
